import { priorityList, noPriority } from '@/pages/common/constant.js';
import priorityIcon from '@/pages/components/priorityIcon/index.js';
import './index.less';
const priorityHandler = (priority) => {
  return priorityList.find(item => +item.value === +priority) ?? noPriority;
};
export default {
  name: 'noticePriorityIcon',
  functional: true,
  render(h, ctx) {
    const priority = ctx.props.priority ?? 0;
    const msgTypeP = (ctx.props.msgType ?? '').split('-');
    const msgType = msgTypeP[msgTypeP.length - 1];

    const isEtops = ctx.props.isEtops ?? -1;
    const priorityF = priorityHandler(priority);
    let ht = '';
    switch (msgType) {
      case 'MMSG':
        ht = <span class={['msg-msg-box msg-msg-box-icon ml-3']} style={{ 'background-color': priorityF?.color } }>M</span>;
        break;

      case 'SMT':
        ht = <span class={['msg-m-box msg-m-box-icon ml-3']} style={{ 'background-color': priorityF?.color } }>M</span>;
        break;
      case 'MMO':
        ht = <span class={['msg-m-box msg-m-box-icon ml-3']} style={{ 'background-color': priorityF?.color } }>M</span>;
        break;
      case 'Service':
        ht = <span class={['msg-f-box msg-f-box-icon ml-3']} style={{ 'background-color': priorityF?.color } }><span class='msf-f-text'>N</span></span>;
        break;
      case 'System':
        ht = <span class='msg-m2-box msg-m2-box-icon ml-3' style={{ 'background-color': priorityF?.color }}>
          <span class='msf-f-text'>N</span>
          <span class={['msg-f2-box msg-f2-box-icon']} style={{ 'background-color': priorityF?.color } }>
          </span>
        </span>;
        break;
      case 'FDE':
        ht = <priorityIcon priority={priority}/>;
        break;
      case 'Notice':
        ht = <a-icon component={require('@/assets/icon/Alert_notice.svg')} class={`notice-alert-${priority}`} style='font-size:20px;vertical-align: middle;margin-left:4px' />;
        break;
      default:
        ht = <span class={['msg-m-box msg-m-box-icon ml-3']} style={{ 'visibility': 'hidden' } }>M</span>;
        break;
    }

    const nt = [ht];
    if (isEtops && isEtops !== -1) {
      nt.unshift(<a-icon component={require('@/assets/icon/Fleet_Status_ETOPS.svg')} style='font-size:20px!important;vertical-align: top;margin-right:3px' />);
    }
    return <div class='d-flex ai-center'>
      {nt}
    </div>;
  }
};
